<template>
	<view class="index page">
		<!-- 轮播图start -->
		<swiper :indicator-dots="true" :autoplay="true" class="swiper">
			<swiper-item v-for="item in swiper" @click="goMovieInfo(item.movie_id)">
					<image :src="item.img_url" class="swiper-item"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图end -->
		
		
		<!-- 热门电影start -->
		<view class="hotsuper-wapper hot-wapper">
			<hot-title title="热门电影" iconPath="/static/icos/hot.png"></hot-title>
			<scroll-view scroll-x="true">
				<view class="hotsuper-scroll">
					<view class="hotsuper-scroll-item" v-for="item in hotMovie" @click="goMovieInfo(item.movie_id)">
						<image :src="item.poster_url" class="hotsuper-scroll-cover"></image>
						<view class="hotsuper-scroll-title">
							{{item.title}}
						</view>
						<star :score="item.grade" showNumber="1"></star>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 热门电影end -->
		
		
		<!-- 热门预告start -->
		<view class="hot-trailer-wapper hot-wapper">
			<hot-title title="热门预告" iconPath="/static/icos/interest.png"></hot-title>
			<view class="hot-trailer">
				<video
				v-for="item in hotTrailer"
				:poster="item.poster"
				class="hot-trailer-item" 
				:src="item.video_url" 
				:id="item.id.toString()"
				controls
				@play="myPlay(item.id.toString())"></video>
			</view>
		</view>
		<!-- 热门预告end -->
		
		
		<!-- 猜你喜欢start -->
		<view class="like-wapper hot-wapper">
			<hot-title title="猜你喜欢" iconPath="/static/icos/guess-u-like.png"></hot-title>
			<view class="like-item" v-for="item in like" >
				<image :src="item.poster_url" class="like-cover" @click="goMovieInfo(item.id)"></image>
				<view class="like-msg" @click="goMovieInfo(item.id)">
					<view class="like-title">{{item.title}}</view>
					<star score="8.3"></star>
					<view class="like-classify">{{item.category}}</view>
					<view class="like-addtime">上映时间：{{item.add_time}}</view>
				</view>
				<view class="like-praise">
					<like></like>
				</view>
			</view>

		</view>
		<!-- 猜你喜欢end -->
	</view>
</template>

<script>
	import star from '../../components/star.vue';
	import hotTitle from '../../components/hotTitle.vue'
	import like from '../../components/like.vue'
	export default {
		data() {
			return {
				swiper:[],
				hotMovie:[],
				hotTrailer:[],
				like:[]
			}
		},
		onLoad() {
			this.getSwiper();
			this.getHotMovie()
			this.getHotTrailer()
			this.getLike()
		},
		onPullDownRefresh(){
			this.getLike()
		},
		methods: {
			myPlay(id){
				this.hotTrailer.forEach(item=>{
					if(item.id!=id){
						let ctx=uni.createVideoContext(item.id.toString())
						ctx.pause()
					}
				})
			},
			getSwiper(){
				uni.request({
					url:this.root+"/api/getSwiper",
					success:(res)=> {
						if(res.data.err==0){
							this.swiper=res.data.data
						}
					}
				})
			},
			goMovieInfo(id){
				uni.navigateTo({
					url:"../movieInfo/movieInfo?id="+id,
				})
			},
			getHotMovie(){
				uni.request({
					url:this.root+'/api/getHotMovie',
					success:(res)=>{
						if(res.data.err==0)
						this.hotMovie=res.data.data
					}
				})
			},
			getHotTrailer(){
				uni.request({
					url:this.root+'/api/getHotTrailer',
					success:(res)=> {
						if(res.data.err==0){
							this.hotTrailer=res.data.data
							console.log(this.hotTrailer)
						}
					}
				})
			},
			getLike(){
				uni.showLoading({
					mask:true
				})
				uni.showNavigationBarLoading()
				uni.request({
					url:this.root+'/api/getLike',
					success:(res)=> {
						// debugger
						if(res.data.err==0){
							this.like=res.data.data
						}
					},
					complete:()=> {
						uni.stopPullDownRefresh()
						uni.hideLoading()
						uni.hideNavigationBarLoading()
					}
				})
			}
		},
		components:{
			star,
			hotTitle,
			like
		}
	}
</script>

<style scoped>
@import url('index.css')
</style>
